<template>
  <div class="pay-wrap">
    <!-- 地址 -->
    <div class="address">
      <p>广西桂林雁山</p>
      <p>博文管理学院</p>
      <p>彭红明 156****5513</p>
    </div>
    <!-- 物品信息 -->
    <div class="goodInfo">
      <img :src="goodInfo.pic" alt="" />
      <div>
        <p>{{ goodInfo.name }}</p>
        <p>好书</p>
        <div>
          <span style="color:red; margin-right:20px"
            >￥{{ goodInfo.presentprice }}</span
          >
          <el-input-number
            v-model="goodInfo.count"
            :min="1"
            :max="999"
            label="描述文字"
            size="small"
          ></el-input-number>
        </div>
      </div>
    </div>
    <!-- 账单信息 -->
    <div class="payInfo">
      <!-- 金额 -->
      <div>
        <span>商品金额</span>
        <span>￥{{ goodInfo.presentprice }}</span>
      </div>
      <div>
        <span>运费</span>
        <span>￥0</span>
      </div>
      <div>
        <span>数量：</span>
        <span>{{ goodInfo.count }}</span>
      </div>
      <div>
        <span>合计：</span>
        <span>￥{{ goodInfo.presentprice * goodInfo.count }}</span>
      </div>
    </div>
    <!-- 提交订单 -->
    <div class="pay">
      <span>￥{{ goodInfo.presentprice * goodInfo.count }}</span>
      <el-button @click="clickPay" size="medium" type="danger" round>
        提交订单
      </el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      goodInfo: this.$route.params.goodInfo
    }
  },
  mounted() {
    // console.log(this.$route.params)
  },
  methods: {
    clickPay() {
      // console.log(this.goodInfo)
      // 弹窗询问用户是否结算
      this.$confirm('此操作将提交订单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          // 订单总价
          this.goodInfo.totalvalue =
            this.goodInfo.presentprice * this.goodInfo.count
          this.goodInfo.status = 1
          // 订单状态
          const goodInfo = this.goodInfo
          // 添加订单
          const { data: res } = await this.$http.post(
            'http://localhost:3000/api/users/order/add',
            goodInfo
          )
          if (res.status !== true) {
            return this.$message.error('结算失败')
          }
          // 结算成功 移除购物车
          const {
            data: res1
          } = await this.$http.post(
            'http://localhost:3000/api/users/shopcat/delete',
            { id: this.goodInfo.id }
          )
          this.$router.push('/order')
          this.$message.success('结算成功')
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消结算'
          })
        })
    }
  }
}
</script>

<style lang="less" scoped>
.pay-wrap {
  > div {
    margin-bottom: 15px;
  }
  .address {
    padding: 15px;
    border-radius: 15px;
    border: 1px solid #dcdfe6;

    p:nth-child(1) {
      font-size: 14px;
    }
    p:nth-child(2) {
      font-size: 16px;
      font-weight: 600;
    }
    p:nth-child(3) {
      font-size: 14px;
    }
  }
  .goodInfo {
    display: flex;
    align-items: center;
    height: 100px;
    padding: 15px;
    border-radius: 15px;
    border: 1px solid #dcdfe6;

    img {
      height: 100px;
      border-radius: 5px;
    }
    > div {
      margin-left: 20px;
      p:nth-child(1) {
        font-size: 16px;
        font-weight: 600;
      }
      p:nth-child(2) {
        font-size: 12px;
      }
    }
  }

  .payInfo {
    padding: 15px;
    border-radius: 15px;
    border: 1px solid #dcdfe6;
  }
  .pay {
    display: flex;
    align-items: center;
    justify-content: space-between;
    > span {
      font-size: 30px;
      font-weight: 900px;
      color: red;
    }
  }
}
</style>
